<template>
	<view class="cargooil" :style="{ ...customStyle, top: top, left: left,flexDirection:flex }">
		<histogramper :value="props.value"></histogramper>
		<view style="margin-bottom: 10%;">
			<!-- 液压高度 -->
			<view>{{ isEmptyToCharacter(h) }}m</view>
			<!-- 吨数 -->
			<view>{{ isEmptyToCharacter(t) }}m³</view>
			<!-- 压力 -->
			<view>{{ isEmptyToCharacter(b) }}mbar</view>
			<!-- 温度 -->
			<view>{{ isEmptyToCharacter(w) }}℃</view>
		</view>
	</view>
</template>

<script setup>
	import histogramper from "@/components/echats/histogramper.vue";
	import {
		isEmptyToCharacter
	} from "@/plugins/index.js";
	let props = defineProps({
		customStyle: {
			type:Object,
			default: () => {
				return {};
			},
		},
		t: {
			type: Number,
			default: 0,
		},
		h: {
			type: Number,
			default: 0,
		},
		b: {
			type: Number,
			default: 0,
		},
		w: {
			type: Number,
			default: 0,
		},
		top: {
			type: String,
			default: '0rpx',
		},
		left: {
			type: String,
			default: '0rpx',
		},
		flex:{
			type: String,
			default: "row-reverse",
		},
		value: {
			type: Number,
			default: 0,
		},
	});
</script>

<style lang="scss" scoped>
	.cargooil {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 8px;
	}
</style>